
<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>文章分类</span>
        <el-button class="button" type="primary" @click="btnAddDialog"> 添加</el-button>
      </div>
    </template>
    <!-- 查询 -->
    <el-form :inline="true" :model="frmQuery" class="demo-form-inline">
      <el-form-item label="文章类别">
        <el-input v-model="frmQuery.a_uid" placeholder="请输入文章类别" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="btnQuery">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="as_class" label="文章类别" width="200" />
      <el-table-column prop="update_time" label="修改时间" width="200" />
      <el-table-column prop="create_time" label="创建时间" width="200" />
      <el-table-column fixed="right" label="操作" width="">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="updateDialog(scope.row.as_uid)">修改类别</el-button>
        </template>
      </el-table-column>
    </el-table>
    <br />
    <!-- 分页 -->
    <el-pagination :currentPage="currentPage" :page-size="pageSize" :page-sizes="[5, 10, 20, 30, 40]" :background="true"
      layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
  </el-card>
  <!-- 详情对话框 -->
  <el-dialog v-model="detailDialogVisible" title="查看文章内容" width="60%">
    <el-descriptions :column="4" border title="User Info">
      <el-descriptions-item label="文章名">{{ article.a_uid }}</el-descriptions-item>
      <el-descriptions-item label="文章内容">{{ article.a_context }}</el-descriptions-item>
    </el-descriptions>
  </el-dialog>
  <!-- 添加对话框 -->
  <el-dialog v-model="dialogFormVisible" title="添加类别">
    <el-form :model="form">
      <el-form-item label="类别名" :label-width="formLabelWidth">
        <el-input v-model="form.as_class" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="addarticles_class">
          添加
        </el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 修改对话框 -->
  <el-dialog v-model="updateDialogVisible" title="修改文章内容">
    <el-form :model="form">
      <el-form :model="form">
        <el-form-item label="文章类别" :label-width="formLabelWidth">
          <el-input v-model="form.as_class" autocomplete="off" />
        </el-form-item>
      </el-form>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="updatearticles_class">
          修改
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import { ElMessage } from 'element-plus'
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 5,
      pageInfo: {},
      frmQuery: {
        as_uid: ""
      },              // 
      formLabelWidth: "140px",
      form: {},
      dialogFormVisible: false,    //添加对话框 
      detailDialogVisible: false,  //详情对话框
      updateDialogVisible: false,  //修改对话框
      tableData: [],
      class: {}
    }
  },
  mounted() {
    this.getData(1, 5) //分页
    this.$http.get("http://localhost:8080/articles_cls/list").then((res) => {
      this.tableData = res.data
      console.log(res.data);
    }).catch((err) => {
      console.log(err);
    })          // 加载信息 res中有我们请求响应的数据
  },
  methods: {
    // 分页
    getData(num, size) {
      this.$http.get("http://localhost:8080/articles_cls/page", {
        params: {
          pageNum: num,
          pageSize: size,
        },
      }
      ).then((response) => {
        this.pageInfo = response.data
        this.tableData = this.pageInfo.list
      }).catch((err) => {
        console.log(err);
      })
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.getData(this.currentPage, this.pageSize)
      console.log("size", pageSize)
    },
    handleCurrentChange(pageNum) {
      this.currentPage = pageNum
      this.getData(this.currentPage, this.pageSize)
      console.log("num", pageNum)
    },
    btnQuery() {
      console.log(this.frmQuery);
      this.LoadData()
    },
    LoadData() {         // 加类别信息数据 
      this.$http.get("http://localhost:8080/articles_cls/list?as_uid=" + this.frmQuery.as_uid).then((res) => {
        this.tableData = res.data
        console.log(res.data);
      }).catch((err) => {
        console.log(err);
      })
    },
    updatearticles_class() {
      console.log(this.form);
      this.$http.post("http://localhost:8080/articles_cls/update", this.form).then((res) => {
        console.log(res.data);
        if (res.data == 1) {
          console.log("修改成功！");
          this.form = {}     // 清空表单对象
          this.updateDialogVisible = false;    // 关闭修改对话框
          this.LoadData()    // 重新加载数据
          ElMessage({
            message: '修改成功！',
            type: 'success',
          })
        } else {
          console.log("修改失败！");
          ElMessage({
            message: '修改失败！',
            type: 'warning',
          })
        }
      }).catch((err) => {

      })
    },
    addarticles_class() {
      console.log(this.form);
      this.$http.post("http://localhost:8080/articles_cls/add", this.form).then((res) => {
        console.log(res.data);
        if (res.data == 1) {
          console.log("添加成功！");
          this.form = {}
          this.dialogFormVisible = false;
          this.LoadData()
          ElMessage({
            message: '添加成功！',
            type: 'success',
          })
        } else {
          console.log("添加失败！");
          ElMessage({
            message: '添加失败！',
            type: 'warning',
          })
        }
      }).catch((err) => {

      })
    },
    deleteClick(as_uid) {      // 删除操作
      console.log(as_uid);
      this.$http.get("http://localhost:8080/articles_cls/del/" + as_uid).then((res) => {
        console.log(res.data);
        if (res.data != null) {
          console.log("删除成功！");
          this.LoadData()
          ElMessage({
            message: '删除成功！',
            type: 'success',
          })
        } else {
          console.log("删除失败！");
          ElMessage({
            message: '删除失败！',
            type: 'warning',
          })
        }
      }).catch((err) => {

      })
    },
    updateDialog(as_uid) {      // 编辑操作
      console.log(as_uid);
      this.$http.get("http://localhost:8080/articles_cls/get/" + as_uid).then((res) => {
        console.log(res.data);
        this.form = res.data
        //this.form.stu_sex = this.form.user_name?"1":"0"
        //   this.form.stu_interest = this.form.stu_interest.split(',')
      }).catch((err) => {

      })
      this.updateDialogVisible = true
    },
    detailDialog(user_uid) {     // 详情操作
      console.log(user_uid);
      this.$http.get("http://localhost:8080/user/get/" + user_uid).then((res) => {
        console.log(res.data);
        this.User = res.data
      }).catch((err) => {

      })
      this.detailDialogVisible = true
    },
    btnAddDialog() {
      this.dialogFormVisible = true
    }
  }
}
</script>
<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 100%;
}
</style>